<template>
	<div class="app-container">
		<el-form size="small" :inline="true" label-width="68px">
			<el-form-item label="年份" prop="status">
				<el-date-picker v-model="year" type="year" format="yyyy" value-format="yyyy" placeholder="选择年份" @change="yearChange"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
			</el-form-item>

		<el-form-item>
			<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
		  </el-form-item>
		</el-form>
		<el-table border v-loading="loading" :data="list" show-summary :summary-method="getSummaries">
			<el-table-column label="地区" align="center" prop="name" width="120" />
			<el-table-column v-for="(item, index) in Lecturerlist" :key="index" :label="item.name" align="center">
				<template slot-scope="scope">
					{{ scope.row.lecturer[item.name] || 0 }}
				</template>
			</el-table-column>
			<el-table-column label="地区总课时数" align="center" prop="total" width="120" />
		</el-table>
	</div>
</template>

<script>
	import { listLecturer, selectDealerForms } from "@/api/course/lecturer";
	import XLSX from 'xlsx'
	export default {
		data() {
			return {
				year: '',
				month: '',
				value: 2,
				startTime: '',
				endTime: '',
				Lecturerlist: [],
				loading: true,
				list: [],
			}
		},
		created() {
			let nowDate = new Date();
			this.year = nowDate.getFullYear().toString();
			this.getList();
		},
		methods: {
			yearChange(e) {
				this.getList();
			},
			/**
			 * 自定义合计
			 * @param {Object} param
			 */
			getSummaries(param) {
				const { columns, data } = param;
				console.log('自定义合计', columns);
				const sums = [];
				columns.forEach((column, index) => {
					
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					
					let num = 0;
					data.forEach(item => {
						if(column.label == '地区总课时数') {
							num += item.total;
						} else {
							num += item.lecturer[column.label] ? item.lecturer[column.label] : 0;	
						}
					});
					
					sums[index] = num;
				});
				
				return sums;
			},
			/**
			 * 获取讲师
			 */
			getListLecturer() {
				listLecturer().then(res => {
					if (res.code == 200) {
						this.Lecturerlist = res.rows;
					}
				});
			},
			/**
			 * 获取时间
			 */
			getTime(){
				let currentYear = this.year;
				this.startTime = `${currentYear}-01-01 00:00:00`;
				
				let nowDate = new Date();
				let month = nowDate.getMonth() + 1;
				let lastDay = new Date(currentYear, month, 0).getDate();
				
				this.endTime = `${currentYear}-${month}-${lastDay} 23:59:59`
			},
			/**
			 * 数据列表
			 */
			getList() {
				this.getTime();
				this.getListLecturer();
				
				selectDealerForms(
					this.startTime, 
					this.endTime
				).then(res => {
					if(res.code == 200) {
						this.list = res.data;
						
						this.list.forEach((item, index) => {
							item.total = 0;
							for(var index in item.lecturer) {
								item.total += parseInt(item.lecturer[index]);
							}
						});
					}
					this.loading = false;
				});
			},
			handleExport() {
	
				const cellElements = document.querySelectorAll('thead.has-gutter .cell');
				console.log(cellElements)
				const contentArray = Array.from(cellElements).map(cell => cell.textContent.trim());

				const exportData = [];
				exportData.push(contentArray);

				const trElements = document.querySelectorAll('.el-table__body tr');
				
				trElements.forEach(function(item, index) {
				const cells = item.querySelectorAll('.cell');
				const arr=Array.from(cells).map(cell => cell.textContent.trim());
				exportData.push(arr);
				});

				const tbCellElements = document.querySelectorAll('tbody.has-gutter .cell');
				const tbContentArray = Array.from(tbCellElements).map(cell => cell.textContent.trim());
				exportData.push(tbContentArray);

				// 创建工作簿
				const workbook = XLSX.utils.book_new();
				const worksheet = XLSX.utils.aoa_to_sheet(exportData);
				
				// 添加工作表到工作簿
				XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
				
				// 导出文件
				XLSX.writeFile(workbook, '讲师-地区课时分布统计.xlsx');
			}
		},
	}
</script>

<style>
</style>